<!-- 分页 -->
<template lang="pug">
section(v-if="this.maxIndex > 1")
  icon-angle-bracket.icon-forward.active(direction="left" @click.native="clickPrev")
  div.active-page {{ curIndex }}
  icon-angle-bracket.icon-forward.active(direction="right" @click.native="clickNext")

  div 共 {{ this.maxIndex }} 页

  g-h(j-c="space-between" a-i="center") 
    div 第
    input.input(@keyup.enter="jump")
    div 页
</template>

<script>
/*
  事件
    jump     跳转页面
*/

export default {
  name: "Pager",
  props: {
    // 一共多少页
    maxIndex: {
      type: Number,
      default: 1,
    },
    // 当前是第几页
    curIndex: {
      type: Number,
      default: 1,
    },
  },

  methods: {
    clickPrev() {
      if (this.curIndex > 1) {
        this.$emit("jump", {
          curIndex: this.curIndex - 1,
        })
      }
    },
    clickNext() {
      if (this.curIndex < this.maxIndex) {
        this.$emit("jump", {
          curIndex: this.curIndex + 1,
        })
      }
    },

    jump(e) {
      let index = parseInt(e.target.value)
      if (isNaN(index) || index === this.curIndex) {
        return
      }
      if (index < 1 || index > this.maxIndex) {
        return
      }
      e.target.blur()
      this.$emit("jump", {
        curIndex: index,
      })
    },
  },

}
</script>

<style lang="stylus" scoped>

.c-root
  display: flex
  justify-content: space-between
  align-items: center
  border: 1px solid grey300
  padding: 0 1rem 

.input
  margin: 0 0.5rem
  width: 2.3rem

.active-page
  padding: 0.4rem 0.7rem
  background: green
  color: white

.active:active
  background: green

</style>
